<template>
    <a-modal v-model:visible="visible" v-if="visible" title="修改段落" :maskClosable="false" :width="876" class="motalsTextpBox" @cancel="handleCancel" :footer="null">
        <!-- <div class="tips">可框选1～4个文字进行修改，修改前后的字数需保持一致</div> -->
        <div class="mainBox">
            <a-textarea id="textVx" :bordered="false" v-model:value="textMsg.content" placeholder="在此输入文本" />
            <!-- <a-dropdown :trigger="['click']" :overlayStyle="{ left: overlayStyles.left, yop: overlayStyles.top }" placement="bottom" :visible="textVisible">
                <div :contenteditable="true" tabindex="0" id="textVx" @focus="focus" @blur="blur">{{ textMsg.content }}</div>
              
                <template #overlay>
                    <div class="ChooseBox" :class="overlayStyles.left ? 'ChooseBox1' : ''">
                        <div class="closeTihuan" @click="textVisibleHandle">
                            <CloseOutlined />
                        </div>
                        <div>所选文字</div>
                        <div class="content">{{ oldText }}</div>
                        <div>替换文字</div>
                        <a-input v-model:value="newText" class="inpurs" style="height: 32px" placeholder="输入替换文字" />
                        <a-button type="primary" class="btnq" @click="fayintihuanOk">完成</a-button>
                    </div>
                </template>
            </a-dropdown> -->
        </div>

        <div class="footBox">
            <a-button class="nextbtn" @click="handleCancel">取消</a-button>
            <a-button class="nextbtn nextbtn1" @click="changeTexBtn">确定</a-button>
        </div>
    </a-modal>
</template>
<script lang="ts" setup>
import { ref, onMounted, watchEffect, nextTick } from 'vue';

import { message } from 'ant-design-vue';
import { useUserStore } from '@/store/user';
import { CloseOutlined } from '@ant-design/icons-vue';
const userStore = useUserStore();
const visible = ref<boolean>(false);
const textMsg = ref<any>({});

onMounted(() => {});
const emit = defineEmits(['changeTextHandle']);
const handleCancel = () => {
    visible.value = false;
};
const changeTexBtn = () => {
    if (textMsg.value.content.length == 0) {
        message.error({ content: '文字不能为空!', key: 'updatableing', duration: 1 });
        return;
    }
    emit('changeTextHandle', textMsg.value);
};

const showTextMotal = (obj: any) => {
    visible.value = true;
    textMsg.value = obj;
    //清除
    userStore.changeTextInfo({});
};

//子组件要暴露出来父组件才能调用
defineExpose({
    showTextMotal,
    handleCancel
});
</script>
<style>
.motalsTextpBox .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: 616px;
    border-radius: 16px;
    overflow: hidden;
}
.motalsTextpBox .ant-modal-header {
    background: #fbfbfc;
    text-align: left;
}
</style>
<style lang="scss" scoped>
.mainBox {
    width: 828px;
    height: 452px;
    border-radius: 8px;
    border: 1px solid #ebeef5;
    padding: 20px;
    text-align: justify;
    font-size: 14px;
    font-family: AlibabaPuHuiTi_2_75_SemiBold;
    color: #606266;
    position: relative;
    #textVx {
        width: 100%;
        font-size: 14px;
        resize: none;
        height: 100%;
    }
}
.mainBox:focus-within {
    border: 1px solid #1890ff;
}
.footBox {
    width: 100%;
    height: 60px;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.nextbtn {
    width: 128px;
    height: 40px;
    border-radius: 22px;
    border: 1px solid #c0c4cc;
    font-size: 14px;
    font-family: AlibabaPuHuiTi_2_55_Regular;
    color: #606266;
}
.nextbtn1 {
    color: #ffffff;
    margin-left: 16px;
    background: #F9601D;
}
.tips {
    position: absolute;
    top: 20px;
    left: 110px;
    font-size: 14px;
    font-family: AlibabaPuHuiTi_2_75_SemiBold;
    color: #909399;
}
.ChooseBox {
    width: 150px;
    height: 220px;
    padding: 16px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);
    position: relative;
    opacity: 0;
    .closeTihuan {
        position: absolute;
        right: 10px;
        cursor: pointer;
    }
    .content {
        margin-top: 8px;
        width: 100%;
        border-radius: 4px;
        min-height: 28px;
        padding: 3px 12px;
        background-color: #ccc;
        margin-bottom: 16px;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; // 默认不换行；
    }
    .btnq {
        border-radius: 10px;
        margin-right: 32px;
        width: 80px;
        display: block;
        margin: 12px auto;
    }
}
.ChooseBox1 {
    opacity: 1;
}
</style>
